// $(function() {
var myChart01 = echarts.init(document.getElementById('chart_alarm_pie')),
    myChart02 = echarts.init(document.getElementById('chart_alarm_line'));
console.log('test');
// 指定图表的配置项和数据
var option_alarm_pie = {
    splitLine: { //终于找到了，背景图的内置表格中“边框”的颜色线条  这个是x跟y轴轴的线      
        show: true,
        lineStyle: {
            color: "#ff6700",
            type: "solid"
        }
    },
    tooltip: {
        trigger: 'item',
        formatter: "{a} <br/>{b} : {c} ({d}%)"
    },
    legend: {
        orient: 'vertical',
        x: 'left',
        data: ['压力', '液位', '开关量', '水浸', '烟感'],
        textStyle: { color: '#fff' },
    },
    calculable: true,
    series: [{
        name: '',
        type: 'pie',
        radius: '55%',
        center: ['50%', '60%'],
        data: [
            { value: 11, name: '压力' },
            { value: 22, name: '液位', selected: true },
            { value: 33, name: '开关量' },
            { value: 123, name: '水浸' },
            { value: 55, name: '烟感' }
        ]
    }],
    color: ['#00a0e9', '#a7d56e', '#00c921', '#fff100', '#878114']
};
// 使用刚指定的配置项和数据显示图表。
myChart01.setOption(option_alarm_pie);
myChart01.on('click', function(param) {
    var index = param.dataIndex,
        data;
    switch (index) {
        case 0:
            data = [11, 11, 15, 13, 12, 13, 10];
            myChart_line(data);
            break;
        case 1:
            data = [5, 6, 3, 9, 6, 5, 10];
            myChart_line(data);
            break;
        case 2:
            data = [11, 11, 1, 13, 12, 4, 10];
            myChart_line(data);
            break;
        case 3:
            data = [1, 11, 15, 3, 12, 13, 10];
            myChart_line(data);
            break;
        case 4:
            data = [11, 11, 3, 13, 12, 2, 10];
            myChart_line(data);
            break;
        default:
            data = [11, 5, 15, 13, 12, 13, 0];
            myChart_line(data);
            break;
    }
});
// var myChart01 = echarts.init(document.getElementById('chart_alarm_pie'));
var myChart_line = function(data) {
        var option_alarm_line = {
            grid: {
                borderColor: '#ff6700'
            },
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                // data: ['报警次数']
            },
            calculable: true,
            xAxis: [{
                type: 'category',
                boundaryGap: false,
                data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
                axisLine: {
                    lineStyle: {
                        color: 'rgba(41, 47, 57,0.8)'
                    }
                },
                axisLabel: {
                    textStyle: {
                        color: '#fff'
                    }
                }
            }],
            yAxis: [{
                type: 'value',
                axisLabel: {
                    formatter: '{value}'
                },
                axisLabel: {
                    textStyle: {
                        color: '#fff'
                    }
                }
            }],
            series: [{
                name: '报警次数',
                type: 'line',
                data: data,
                markLine: {
                    data: [
                        { type: 'average', name: '平均值' }
                    ]
                },
                itemStyle: {
                    normal: {
                        color: '#12e3ca'
                    }
                }
            }]
        };
        myChart02.setOption(option_alarm_line);
    }
    // 默认出现压力报警线
var data = [11, 11, 15, 13, 12, 13, 10];
myChart_line(data);

// })

$(function(){
        $('.time_months>li').click(function () {
            $(this).addClass("nav-sub-active").siblings().removeClass('nav-sub-active');
        if ($('#day_pick').hasClass('nav-sub-active')) {
            $('.opt_sel').addClass('nav-sub-active');
            $('.date_title').addClass('nav-sub-active');
            $('.ta_date').css("borderColor","rgb(52, 179, 255)")
        }
        else{
            $('.opt_sel').removeClass('nav-sub-active');
            $('.date_title').removeClass('nav-sub-active');
            $('.ta_date').css("borderColor","rgb(45, 56, 74)")   
        }
        })
    })